<template>
  <div class="card-box" :style="{ height: `${height}px` }">
    <div v-if="title" class="clearfix">
      <div class="title-box fade-in-box">
        <div class="k-flex k-align-center">
          <img class="img-cursor" src="@/assets/imgs/title.svg" />
          <span class="title">{{ title }}</span>
        </div>
        <div class="head-right">
          <img v-if="setting" @click="onClick" src="@/assets/imgs/ranking/setting.svg" alt="" />
          <slot name="head-right" />
        </div>
      </div>
    </div>
    <div class="body-box fade-in-box">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "RankingCard",
  props: {
    title: {
      type: String,
    },
    height: {
      type: String,
      required: true,
    },
    setting: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onClick() {
      this.$emit("setting", true);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@keyframes breathing {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
.card-box + .card-box {
  margin-top: 16px;
}
.card-box {
  background: rgba(16, 30, 131, 0.34);
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 20px 20px 20px 12px;
    font-family: PingFangSC, PingFang SC;
    .img-cursor {
      width: 28px;
      height: 28px;
      animation: breathing 2s ease-in-out infinite;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      margin-left: 6px;
    }
    .head-right {
      font-size: 12px;
      font-weight: 400;
      color: #738cef;
      line-height: 17px;
      img {
        position: relative;
        cursor: pointer;
        right: -20px;
      }
    }
  }
  .body-box {
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
  }
}
</style>
